兩場 Reactjs.tw Meetup 筆記


Posted by JingTeng on 2023-04-06

Custom Hook

你以為你在寫 Custom Hook,但其實只是在寫 utils | KK

之前好像有寫過筆記但不見了,重看一次...

小技巧

  1. custom hook return 包大括弧 eg. return { users },回傳 data 以外的資訊
    • BAD: return users
    • GOOD: { users, error, loading, refetch }
  2. custom hook 以資源方式封裝
    • hook 裡面只有一個 fetch 是 over engineering。eg. 寫一堆 useCreateUser 這樣的東西
    • 建議操作 resource => useUser,裡面有 CRUD,把動作跟資料封裝進一個 hook,而不是一個動作寫一個 hook
    • 推薦學習 https://usehooks.com/ 的 useAuth
  3. 注意 data reuse

常見錯誤:

  • 把 side effect(會對其他程式碼造成影響)、async 分不清楚
    • useEffect 裡面是放 side effect,有的人在裡面放單純 local storage 更新

useEffect

Read More: https://ithelp.ithome.com.tw/articles/10308940

都 2022 年了你可能還是不懂 useEffect | Zet

一開始有點雜音,後面有修掉。

Function & class component 你可能不知道的關鍵區別

Demo
this.props.user 是 mutable 的方式。他不會記得觸發拿時間的資料,會拿到三秒後的資料。所以觸發時間點的 this.props.user 要找個地方存起來。

Functional Component 每一次 render 都有他自己的連鎖資料流

class component 基於 OOP,以 mutable 的方式存取 this.props&this.state
functional component 基於 FP,每次都會重新執行函數並傳入獨立參數的方式來存取 props&state

每次 render 都有自己的資料狀態(props&state)、event hanler,不會互相影響
effect 也是屬於某次 render,effect 是利用 closures 的方式看到不一樣的原始資料

當依賴的值是常數 closures 好理解,但依賴的值是 mutible 時可能發生意外。
FP 好理解,但犧牲了效能,每次 render 都有自己獨立的資料。

clean up

  • 真正學會 useEffect 的第一步:忘記 class component 的生命週期
  • 不要欺騙 hooks 的 dependencies chain
  • useReducer 是 dependencies chain 的合法作弊手段
  • 以 dependencies 來控制 useEffect 執行邏輯的誤區

React 18 「reusable state」

  • Reusable state — React 18 的 useEffect 在 mount 時為何會執行兩次?

https://slides.com/tz5514/useeffect-guide
strict mode + dev env

總結

  • useEffect 的正確用途
    Function component 沒有生命週期的 API,只有 useEffect 用於「從資料同步到 effect 的行為與影響」
    useEffect 讓你根據目前的資料來同步 React elements(畫面)以外的任何事物
    useEffect 是隨著每次 render 後而自動觸發的
  • 預設情況下,每一次 render 後都應該執行屬於該 render 的 useEffect,來確保同步的正確性與完整性
    useEffect 的 dependencies 是一種「忽略某些不必要的同步」的效能最佳化,而不是用來控制 effect 發生在特定的 component 生命週期,或特定的商業邏輯時機
    確保你有自己寫邏輯來讓 effect 在你預期的條件情境時才執行,而不該依靠 dependencies 來控制這件事情
  • useEffect 應設計成即使多次重複執行也有保持邏輯行為正確的彈性
    確保你的 useEffect 無論隨著 render 重新執行了幾次,你的程式結果都應該保持同步且正常運作
    Strict mode + dev 環境時, component 會自動被 mount 兩次。這是在模擬「mount => unmount => mount 」的過程, 幫助開發者檢查 effect 的設計是否滿足這個彈性的要求
    如果 effect 多次執行會導致問題,可以優先考慮實作 effect 的 cleanup function 來停止或逆轉 effect 中造成的影響









Related Posts

【THM Walkthrough】Breaching Active Directory

【THM Walkthrough】Breaching Active Directory

.Net MVC authorization Controller and Workcontext extension in razor view

.Net MVC authorization Controller and Workcontext extension in razor view

【單元測試的藝術】Chap 1: 單元測試基礎

【單元測試的藝術】Chap 1: 單元測試基礎


Comments